import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { formatMessage } from 'umi/locale';
import { Card, Tabs } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ProductModelInfo from '../components/info';
import ProductModelProperty from '../components/property';

const { TabPane } = Tabs;
@connect(({ productmodel, loading }) => ({
  productmodel,
  loading: loading.models.productmodel,
}))
class ProductModelDetail extends PureComponent {
  componentDidMount() {
    const { dispatch, match } = this.props;
    const { params } = match;
    dispatch({
      type: 'productmodel/fetchDetail',
      payload: params.id,
    });
    dispatch({
      type: 'productmodel/tree',
    });
  }

  render() {
    const {
      productmodel: { detail },
      match,
    } = this.props;

    const { params } = match;

    return (
      <PageHeaderWrapper>
        <div>
          <Card bordered={false}>
            <Tabs defaultActiveKey="1" animated={false}>
              <TabPane tab={formatMessage({ id: 'app.mm.productmodel.detail.info' })} key="1">
                <ProductModelInfo detail={detail} />
              </TabPane>
              <TabPane tab={formatMessage({ id: 'app.mm.productmodel.detail.property' })} key="2">
                <ProductModelProperty productModelId={params.id} />
              </TabPane>
            </Tabs>
          </Card>
        </div>
      </PageHeaderWrapper>
    );
  }
}
export default ProductModelDetail;
